//渲染学生列表
//1.获取dom元素
const table = document.querySelector('.list')
const total = document.querySelector('.total')

//2.发起请求获取数据
const getStudentList = async () => {
  const res = await axios({ url: '/students' })
  console.log(res)
  //3.渲染页面
  const htmlStr = res.data.data
    .map((item) => {
      return `<tr>
      <td>${item.name}</td>
      <td>${item.age}</td>
      <td>${item.gender ? '男' : '女'}</td>
      <td>第${item.group}组</td>
      <td>${item.hope_salary}</td>
      <td>${item.salary}</td>
      <td>${item.province + item.city + item.area}</td>
      <td>
      <a href="javascript:;" class="text-success mr-3"
      ><i data-id='${item.id}' class="bi bi-pen"></i></a>
      <a href="javascript:;" class="text-danger"><i data-id=${
        item.id
      } class="bi bi-trash"></i></a>
      </td>
      </tr>`
    })
    .join('')
  table.innerHTML = htmlStr
  total.innerHTML = res.data.data.length
}
getStudentList()

//增加学生
const modalBox = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalBox)
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=area]')
//获取模态框中的表单元素
const form = document.querySelector('#form')

//获取提交按钮
const submitBtn = document.querySelector('#submit')

//显示省市区
const initCity = async () => {
  //获取省市区
  const res = await axios({
    url: '/api/province',
  })
  // console.log(res)

  //渲染省份下拉菜单
  const provinceStr = res.data.data
    .map((item) => {
      return `<option value="${item}">--${item}--</option>`
    })
    .join('')
  ps.innerHTML = `<option value="">--省份--</option>${provinceStr}`
  //2.给省份提交改变事件，一旦改变获取城市数据
  ps.addEventListener('change', async function () {
    //重新选择时还原默认值
    cs.innerHTML = `<option value="">--城市--</option>`
    as.innerHTML = `<option value="">--地区--</option>`
    //发起获取对应省份的城市数据
    //如果省份内容为空则不发送请求
    if (!ps.value) return
    const res = await axios({
      url: '/api/city',
      method: 'GET',
      params: { pname: ps.value },
    })

    //渲染城市下拉框
    const cityStr = res.data.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`

    //给城市下拉框绑定改变事件，一旦改变获取地区数据
    cs.addEventListener('change', async function () {
      as.innerHTML = `<option value="">--地区--</option>`
      //如果城市内容为空则不发请求
      if (!cs.value) return
      //发起获取对应城市的地区数据
      const res = await axios({
        url: '/api/area',
        params: { pname: ps.value, cname: cs.value },
      })

      //渲染区域下拉框的option
      const areaStr = res.data.data
        .map((item) => {
          return `<option value="${item}">--${item}--</option>`
        })
        .join('')
      as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    })
  })
}
initCity()
//弹出模态框
const addBtn = document.querySelector('#openModal')
addBtn.addEventListener('click', async function () {
  form.reset()

  //设定自定义属性为添加
  modalBox.dataset.id = 'add'
  modalBox.querySelector('.modal-title').innerHTML = '添加学员'
  modal.show()
})

//给提交按钮绑定点击事件
submitBtn.addEventListener('click', async function () {
  console.log(modalBox.dataset.id)
  //获取表单数据
  const data = serialize(form, { hash: true })

  //设置性别判断
  modalBox.querySelector('#cb01').checked
    ? (data.gender = 1)
    : (data.gender = 0)

  //转换数据类型
  data.age = +data.age
  data.gender = +data.gender
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group

  //限制必填项不能为空
  if (!data.age) {
    return alert('年龄不能为空')
  }
  if (!data.hope_salary) {
    return alert('期望薪资不能为空')
  }
  if (!data.salary) {
    return alert('薪资不能为空')
  }
  //限制组号只能为1-8
  if (data.group < 1 || data.group > 8) {
    return alert('组号只能1-8')
  }
  //提交之前做判断，如果自定义属性为add那么提交添加学生
  if (modalBox.dataset.id === 'add') {
    try {
      //请求添加学生
      const res = await axios({ url: '/students', method: 'POST', data: data })
      //关闭modal层
      modal.hide()
      //重新刷新页面
      getStudentList()
      //提示用户已经添加成功
      alert(res.data.message)
    } catch (error) {
      alert(error)
    }
  } else {
    try {
      //请求添加学生
      const res = await axios({ url: '/students', method: 'POST', data: data })
      //关闭modal层
      modal.hide()
      //重新刷新页面
      getStudentList()
      //提示用户已经添加成功
      alert(res.data.message)
    } catch (error) {
      alert(error)
    }
  }
})

//事件委托
table.addEventListener('click', async function (e) {
  // e.target.classList.contains('bi-pen')
  if (e.target.classList.contains('bi-pen')) {
    console.log('我是编辑功能')
    //获取学生id
    const id = e.target.dataset.id
    //发起获取学生详情要求
    const res = await axios({ url: '/students/' + id})
    //获取带所有name属性的表单框
    const nodeList = modalBox.querySelectorAll('[name]')
    //遍历表单框内input集合，赋值
    nodeList.forEach(item => {
      //性别判断
      if (item.name === 'gender') {
        //1是男，2是女
        res.data.data[item.name]
        ?(modalBox.querySelector('#cb01').checked = true)
        :(modalBox.querySelector('#cb02').checked = true)
      }
      //表框赋值
      item.value= res.data.data[item.name]
    })
    //获取城市列表
    const { data: cityData } = await axios({
      url: '/api/city',
      params:{pname:res.data.data.province}
    })
    console.log(cityData);
    const cityStr = cityData.data
      .map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    cs.innerHTML = `<option value="">--城市--</option>${cityStr}`
    //给城市赋值
    cs.value = res.data.data.city
    //获取城市列表
    const { data: areaData } = await axios({
      url: '/api/area',
      params: { pname: res.data.data.province, cname: res.data.data.city },
    })
    //渲染城市下拉框选线
    //渲染区域下拉框的option
    const areaStr = areaData.data
      ?.map((item) => {
        return `<option value="${item}">--${item}--</option>`
      })
      .join('')
    // console.log(res);
    as.innerHTML = `<option value="">--地区--</option>${areaStr}`
    as.value = res.data.data.area
    //设置modal自定义属性，把学生ID给到modal层自定义属性
    modalBox.dataset.id = id
    
    modalBox.querySelector('.modal-title').innerHTML =
      '修改学员信息'
    //打开modal层
    modal.show()
  }
  if (e.target.classList.contains('bi-trash')) {
    //获取学生的id
    const id = e.target.dataset.id
    //发起删除学生的请求
    await axios({
      url: '/students/' + id,
      method:'DELETE'
    })
    getStudentList()

    alert('删除成功')
  }
})
